<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/show.css">
    <script src="js/vue.js"></script>
</head>

<body>

    <section id="root" class="root">
        <!-- 加载页面 -->
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            请输入口令
                        </h4>
                    </div>
                    <form action="" method="post">
                        <div class="modal-body">
                            <p> 那一天，我们在一起了 </p>
                            <input type="number" v-model="password" placeholder="输入数字">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" @click="math_pass">
                                提交更改
                            </button>
                        </div>
                    </form>

                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <section id="load" class="load jump-letter-paper" data-toggle="modal" data-target="#myModal">

            <div class="top jump-letter-paper">
                <div id="letter_cover" class="letter-cover jump-letter-paper"></div>
                <div class="letter-post jump-letter-paper"></div>
            </div>
            <div class='center'>
                <div class="card mb-3">
                    <div>
                        <div class="meng"></div>
                        <img src="img/tu.jpg" class="card-img-top" alt="...">
                    </div>

                    <div class="card-body">
                        <h5 class="card-title"></h5>
                        <p class="card-center card-text"
                            v-html="'当我跨过沉沦的一切<br><br>向着永恒开战的时候<br><br>你是我的军旗<br><br><small>我的宁小姐</small>'"></p>
                    </div>
                </div>
            </div>

        </section>

        <!-- 信 -->
        <section id="letters_box" class="letters-box">
            <!-- 信 -->
            <!-- 信封面 集合 -->
            <section id="letters" class="letters jump-letter-paper">
                <div class="card letter w-75 jump-letter-paper">
                    <div class="car-top">
                        <ul>
                            <li class="ge"></li>
                            <li class="ge"></li>
                            <li class="ge"></li>
                            <li class="ge"></li>
                            <li class="ge"></li>
                            <li class="ge"></li>
                        </ul>
                        <div class="img-box"></div>
                    </div>
                    <div class="card-body jump-letter-paper">
                        <p class="card-text"> 农历
                            二零二一年腊月廿九&emsp;&emsp;&emsp;除夕夜<br><br />&emsp;&emsp;我们有照片，也为彼此写下文字，可都忘了声音，声音也是会变的。我希望多年之后，无意打开发现这里，然后牵起你的手，对你说一句:听听那时我们的爱情。
                        </p>
                        <!-- <p class="card-text card-end"><small
                                class="text-muted">农历：二零二一年腊月廿七</small></p> -->
                    </div>
                    <div class="card-bottom">
                        <button id="reading" class="btnb reading" @click="redingClick">倾听</button>
                        <button class="btnb sharing">分享</button>
                        <button class="btnb setting">操作</button>
                    </div>
                </div>
                <!-- <div class="add-card"><a href="#">为他/她或是为自己写一封信</a></div> -->
            </section>

            <!-- 信纸 -->
            <section id="letter_paper_box" class="letter-paper-box jump-letter-paper">
                <!-- 顶部导航栏 -->
                <div class="top-nav">
                    <button class="back" @click="closeLetter"><svg t="1642595195376" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4733"
                            width="200" height="200">
                            <path
                                d="M874.69 495.525c0 11.297-9.168 20.466-20.466 20.466H249.45l188.084 188.084c7.992 7.992 7.992 20.947 0 28.939a20.445 20.445 0 0 1-14.47 5.996 20.408 20.408 0 0 1-14.48-5.996l-223.008-223.01a20.455 20.455 0 0 1 0-28.94l223.019-223.028c7.992-7.992 20.957-7.992 28.95 0 7.991 8.002 7.991 20.957 0 28.95L249.47 475.058h604.753c11.298 0 20.466 9.158 20.466 20.466z"
                                p-id="4734"></path>
                        </svg></button>
                    <button class="share"><svg t="1642595545547" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5029" width="200" height="200">
                            <path
                                d="M736 800c-35.296 0-64-28.704-64-64s28.704-64 64-64 64 28.704 64 64-28.704 64-64 64M288 576c-35.296 0-64-28.704-64-64s28.704-64 64-64 64 28.704 64 64-28.704 64-64 64m448-352c35.296 0 64 28.704 64 64s-28.704 64-64 64-64-28.704-64-64 28.704-64 64-64m0 384a127.776 127.776 0 0 0-115.232 73.28L415.872 564.224a30.848 30.848 0 0 0-9.696-3.2A127.68 127.68 0 0 0 416 512c0-6.656-0.992-13.088-1.984-19.456 0.608-0.32 1.28-0.416 1.856-0.768l219.616-125.472A127.328 127.328 0 0 0 736 416c70.592 0 128-57.408 128-128s-57.408-128-128-128-128 57.408-128 128c0 6.72 0.992 13.152 1.984 19.616-0.608 0.288-1.28 0.256-1.856 0.608L388.512 433.696A127.328 127.328 0 0 0 288 384c-70.592 0-128 57.408-128 128s57.408 128 128 128a126.912 126.912 0 0 0 84.544-32.64 31.232 31.232 0 0 0 11.584 12.416l224 128c0.352 0.224 0.736 0.256 1.12 0.448C615.488 812.992 669.6 864 736 864c70.592 0 128-57.408 128-128s-57.408-128-128-128"
                                p-id="5030"></path>
                        </svg></button>
                    <button class="setting" @click="playc">
                        <svg t="1643616043966" id='pause' class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="860" width="200" height="200">
                            <path
                                d="M512 1024C228.266667 1024 0 795.733333 0 512S228.266667 0 512 0s512 228.266667 512 512-228.266667 512-512 512z m0-42.666667c260.266667 0 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333z m-106.666667-682.666666c12.8 0 21.333333 8.533333 21.333334 21.333333v384c0 12.8-8.533333 21.333333-21.333334 21.333333s-21.333333-8.533333-21.333333-21.333333V320c0-12.8 8.533333-21.333333 21.333333-21.333333z m213.333334 0c12.8 0 21.333333 8.533333 21.333333 21.333333v384c0 12.8-8.533333 21.333333-21.333333 21.333333s-21.333333-8.533333-21.333334-21.333333V320c0-12.8 8.533333-21.333333 21.333334-21.333333z"
                                p-id="861" fill="#515151"></path>
                        </svg>
                        <svg t="1643428024633" id='plays' class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="1023" width="200" height="200">
                            <path d="M772.7 217.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#515151"
                                p-id="1024"></path>
                            <path
                                d="M415.8 679.9c5.9 0 11.5-1.6 16.2-4.5l231.1-134.6c10.9-5.2 18.5-16.3 18.5-29.2 0-11.9-6.4-22.3-16-27.8L439.7 352.2c-5.8-6.7-14.4-10.9-23.9-10.9-17.6 0-31.8 14.4-31.8 32.1 0 0.6 0 1.2 0.1 1.8l-0.4 0.2 0.5 269c-0.1 1.1-0.2 2.2-0.2 3.4 0 17.7 14.3 32.1 31.8 32.1z"
                                fill="#515151" p-id="1025"></path>
                            <path
                                d="M909.8 306.6c-5.4-10.5-16.3-17.8-28.9-17.8-17.8 0-32.2 14.4-32.2 32.1 0 6 1.7 11.7 4.6 16.5l-0.1 0.1c26.9 52.4 42.1 111.8 42.1 174.7 0 211.6-171.6 383.2-383.2 383.2S128.8 723.8 128.8 512.2 300.4 129.1 512 129.1c62.5 0 121.5 15 173.6 41.5l0.2-0.4c4.6 2.6 10 4.1 15.7 4.1 17.8 0 32.2-14.4 32.2-32.1 0-13.1-7.9-24.4-19.3-29.4C653.6 81.9 584.9 64.5 512 64.5 264.7 64.5 64.3 265 64.3 512.2S264.7 959.9 512 959.9s447.7-200.4 447.7-447.7c0-74.1-18-144-49.9-205.6z"
                                fill="#515151" p-id="1026"></path>
                        </svg></button>
                </div>
                <div class="voice-letter">
                    <div class="right-voice">
                        <svg t="1643427295869" class="icon play" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="665" width="200" height="200">
                            <path
                                d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                                p-id="666" fill="#d81e06"></path>
                            <path
                                d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                                p-id="667" fill="#d81e06"></path>
                        </svg>
                    </div>
                    <div class="left-text">
                        <p class="voice-title"></p>
                        <p class="voice-script">一个灵魂的自我独白</p>
                    </div>
                </div>
                <div id="letter_paper" class="letter-paper">
                    <p class="paper-text">
                        致宁小姐：<br />&emsp;&emsp;hey，新的一年啦，过去的一年你收获了什么呢。我？我找到了...你呀，最重要、最温馨的事啦。一个既可爱又美丽的女子，很喜欢你笑起来的样子呢，尽情笑起来的时候好美好美，我还有图片呢，嘻嘻。好喜欢和你待一起的日子，虽然短暂却很美好。早上，一睁开眼就能看到你，然后紧紧把你抱在怀里，一起躺着、一起看书。我的宝吖，她甜甜的，真好。<!-- <img src="img/f1.jpg" alt=""> --><br />&emsp;&emsp;这一年也是一个漫长的学习旅途，但，始终都有都有你陪着。买了个简单的相机、说好的要一起拍好多的照片，不过你的宝还不怎么会。也试着把我的宝打扮得漂漂亮亮的，不过她本来就美嘛。<img src="img/f2.jpg" alt=""><br />&emsp;&emsp;不过，过去的一年，还没能给你做你喜欢的饭菜，小鸡炖蘑菇、清蒸鲈鱼，也还没能一起去看海、打火锅、看雪(虽然今年我也没能看)，还有好多好多要一起呢，我一直都记在心里。新的一年，以及往后的日子，也都会努力一起的嘛，来年咱一起看雪，好不好。<br />&emsp;&emsp;和你一起，我的宁小姐。
                    </p>
                    <p class="paper-text-right">你的伍胜中<br />农历 二零二一年腊月廿九 </p>
                </div>
            </section>
        </section>

    </section>

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>

        const Vm = new Vue({
            el: '#root',
            data: {
                progressValObj: {
                    width: "25%"
                },
                cardent: null,
                cardHeight: null,
                cardBodyHeight: null,
                scrollVal: 0,
                password: "",
                letterData: null,
                letterbr: false,
                mp3: null,
            },
            methods: {
                redingClick(event) {
                    /*                     // 设置图片的外边距以适应文本分隔线
                                        letter_imgs = document.getElementById("letter_paper").getElementsByClassName("paper-text")[0].getElementsByTagName("img")
                                        console.log(letter_imgs)
                                        for(letter_img of letter_imgs){
                                            letter_img_height = window.getComputedStyle(letter_img).height
                                            letter_img_magrin = (24-parseFloat(letter_img_height)%24)/2
                                            console.log(letter_img_height)
                                        }
                     */
                    // 设置跳转阅读页的动画
                    // 获取相关节点
                    console.log("执行了", "redingClick")
                    letters = document.getElementById('letters');
                    btn = event.target
                    card = btn.parentNode.parentNode;
                    this.cardent = card
                    cardBody = card.getElementsByClassName('card-body')[0];
                    card.style.height = window.getComputedStyle(card).height;
                    cardBody.style.height = window.getComputedStyle(cardBody).height;
                    this.cardHeight = card.style.height
                    this.cardBodyHeight = cardBody.style.height
                    // 信纸元素
                    letter_paper_box = document.getElementById('letter_paper_box')
                    if (cardBody.style.height == window.getComputedStyle(cardBody).height) {
                        // 动画消失
                        card.style.height = "100%";
                        cardBody.style.height = "100%";
                        card.style.opacity = 0;
                        letters.style.opacity = 0;
                        letters.style.top = "-80px";
                        // 展现
                        letter_paper_box.style.display = "inline-block"
                        letter_paper_box.style.opacity = 0

                        // 2s后隐藏控件
                        setTimeout(() => {
                            letters.style.display = "none";
                            letter_paper_box.style.opacity = 1
                            // 回到顶部
                            document.documentElement.scrollTop = 0;
                            document.body.scrollTop = 0;

                            // 播放音频
                            mp3url = './voice/letter101.mp3'
                            mp3 = new Audio(mp3url)
                            this.mp3 = mp3
                            mp3.play()
                            console.log("播放了")
                        }, 2000);

                    }

                },
                openLetter(event) {
                    // 关闭密码框
                    $('#myModal').modal('hide')
                    letter_cover = document.getElementById('letter_cover');
                    load_p = document.getElementById('load');
                    letter_post = document.getElementsByClassName('letter-post')[0];
                    letter_post.style.opacity = 0;
                    letter_cover.style.height = 0;
                    letter_cover.style.boxShadow = "10px 10px 10px 10px #000";
                    load_p.style.opacity = 0
                    // 2s后显示控件
                    setTimeout(function () {
                        load_p.style.display = "none"
                        letters_box = document.getElementById('letters_box');
                        letters_box.style.display = "block";
                    }, 2000);
                },
                closeLetter(event) {
                    this.mp3.pause();
                    // 设置跳转阅读页的动画
                    // 获取相关节点
                    letters = document.getElementById('letters');
                    // 信纸元素
                    letter_paper_box = document.getElementById('letter_paper_box')


                    letters.style.top = "0px";
                    letter_paper_box.style.opacity = 0
                    card_body = this.cardent.getElementsByClassName("card-body")[0]
                    card.style.height = this.cardHeight
                    card_body.style.height = this.cardBodyHeight
                    // 2s后隐藏控件
                    setTimeout(() => {
                        letters.style.display = "inline-block";
                        letters.style.opacity = 1;
                        letter_paper_box.style.display = "none"
                        this.cardent.style.opacity = 1;


                    }, 2000);
                },
                math_pass(ele) {
                    if (this.password == 20210827) {
                        const letters_box = document.querySelector("#letters_box")
                        this.$options.methods.openLetter()
                    } else {
                        alert("口令错误")
                    }
                },
                playc() {
                    const pause_display = document.querySelector("#pause").style.display
                    const pause_btn = document.querySelector("#pause")
                    const paly_btn = document.querySelector("#plays")
                    console.log(pause_display)
                    if (pause_display != "none") {
                        this.mp3.pause()
                        pause_btn.style.display = "none"
                        paly_btn.style.display = "inline-block"
                    } else {
                        this.mp3.play()
                        pause_btn.style.display = "inline-block"
                        paly_btn.style.display = "none"
                    }

                },
            },

            mounted() {
                console.log("初始化成功")
            },
            updated() {

            },

        })
    </script>
</body>

</html>